<script setup>
import { ref, watchEffect } from "vue";
import AppItem from "@/components/app/appItem.vue";
import { AppReviewStatus } from "@/Constant/App/appReviewStatus";
import { ListAppByPage } from "@/api/app.js";
import { userInfoStore } from "@/store/userInfoStore.js";
import { ElButton, ElMessage } from "element-plus";
import { Search } from "@element-plus/icons-vue";
import AddAppComponent from "@/components/admin/appAdmin/AddAppComponent.vue";

// 初始化搜索条件（不应该被修改）
const initSearchParams = {
  current: 1,
  pageSize: 12,
  sortOrder: "desc",
  sortField: "createTime",
  id: userInfoStore().info.id, //查询人id
  appName: "", //用户昵称
  appDesc: "", //用户简介
  appType: null, // 用户角色
  scoringStrategy: null,
  reviewStatus: null, // app状态
  reviewerId: null, //审核人id
  reviewMessage: "", //审核信息
};

const searchParams = ref({
  ...initSearchParams,
});
const dataList = ref([]);
const total = ref(0);
/**
 * 加载数据
 */
const loadData = async () => {
  const params = {
    ...searchParams.value,
    reviewStatus: AppReviewStatus.PASS,
  };
  const res = await ListAppByPage(params);
  if (res.code === 0) {
    dataList.value = res.data.apps || [];
    dataList.value.current = res.data.current;
    dataList.value.pageSize = res.data.pageSize;
    total.value = res.data.total || 0;
  } else {
    ElMessage.error("获取数据失败，" + res.data.message);
  }
};

//添加App
const addAppRef = ref(null);
const openAddAppDialog = async () => {
  if(addAppRef){
    addAppRef.value.showAddAppDialog();
  }
};
/**
 * 当分页变化时，改变搜索条件，触发数据加载
 * @param size
 */
//当每页条数发生了变化，调用此函数
const onSizeChange = async (size) => {
  searchParams.value.pageSize = size;
};
//当前页码发生变化，调用此函数
const onCurrentChange = async (num) => {
  searchParams.value.current = num;
};

/**
 * 监听 searchParams 变量，改变时触发数据的重新加载
 */
watchEffect(() => {
  loadData();
});

</script>
<template>
  <div id="homePage">
    <div class="searchBar glassy-card">
      <div class="search-container">
        <el-input
          v-model="searchParams.appDesc"
          placeholder="🔍 快速发现智能答题应用"
          clearable
          @keyup.enter="loadData"
          class="modern-input"
        >
          <template #append>
            <el-button
              :icon="Search"
              size="large"
              @click="loadData"
              class="modern-search-btn"
              color="#6366f2"
            />
          </template>
        </el-input>
      </div>
      <div class="header">
        <div class="extra">
          <el-button type="primary" class="modern-add-btn" @click="openAddAppDialog">
            <span>➕ 添加应用</span>
          </el-button>
        </div>
      </div>
    </div>
    <el-row :gutter="32" class="modern-row">
      <el-col
        v-for="(item, index) in dataList"
        :key="index"
        :xs="24"
        :sm="12"
        :md="8"
        :lg="6"
        :xl="4"
        class="col-item"
      >
        <AppItem :app="item" />
      </el-col>
    </el-row>
    <div class="pagination-container">
      <el-pagination
        v-model:current-page="searchParams.current"
        v-model:page-size="searchParams.pageSize"
        :page-sizes="[3, 4, 6, 8, 12]"
        layout="jumper, total, sizes, prev, pager, next"
        background
        :total="total"
        @size-change="onSizeChange"
        @current-change="onCurrentChange"
        class="modern-pagination"
      />
    </div>
    <!-- 弹窗形式的添加应用组件，挂载在页面根部 -->
    <AddAppComponent
      ref="addAppRef"
      @call-parent="() => { loadData(); }"/>
    <!-- <router-view /> -->
  </div>
</template>

<style scoped>
/* 背景渐变和智能化氛围 */
#homePage {
  min-height: 100vh;
  padding: 32px 0 32px 0;
  background: linear-gradient(135deg, #f8fafc 0%, #e0e7ff 100%);
  box-sizing: border-box;
  transition: background 0.4s;
  .col-item {
    margin-bottom: 32px;
    display: flex;
    justify-content: center;
    align-items: stretch;
  }
}

/* 玻璃拟态卡片风格 */
.glassy-card {
  background: rgba(255, 255, 255, 0.75);
  box-shadow: 0 8px 32px 0 rgba(80, 120, 200, 0.12);
  border-radius: 18px;
  padding: 24px 32px;
  margin-bottom: 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  backdrop-filter: blur(8px);
  border: 1.5px solid rgba(99, 102, 241, 0.08);
  transition: box-shadow 0.2s;
}

.glassy-card:hover {
  box-shadow: 0 12px 40px 0 rgba(99,102,241,0.18);
}

/* 搜索栏现代化样式 */
.searchBar {
  width: 94%;
  margin-bottom: 24px;
}

.search-container {
  flex: 1;
  margin-right: 24px;
  min-width: 260px;
}

.modern-input :deep(.el-input__wrapper) {
  border-radius: 16px 0 0 16px;
  background: #f1f5f9;
  border: none;
  box-shadow: 0 2px 8px 0 rgba(99,102,241,0.04);
  font-size: 1.08rem;
  transition: box-shadow 0.2s;
}

.modern-input :deep(.el-input__inner) {
  background: transparent;
  font-size: 1.08rem;
  color: #374151;
  letter-spacing: 0.5px;
}

.modern-search-btn {
  border-radius: 0 16px 16px 0;
  background: linear-gradient(90deg, #6366f1 0%, #60a5fa 100%);
  color: #fff;
  border: none;
  box-shadow: 0 2px 8px 0 rgba(99,102,241,0.10);
  transition: background 0.2s, box-shadow 0.2s, transform 0.15s;
}
.modern-search-btn:hover {
  background: linear-gradient(90deg, #60a5fa 0%, #6366f1 100%);
  box-shadow: 0 4px 16px 0 rgba(99,102,241,0.18);
  transform: scale(1.04);
}

.header .extra {
  display: flex;
  align-items: center;
  gap: 16px;
}

.modern-add-btn {
  border-radius: 20px;
  font-weight: 500;
  letter-spacing: 1px;
  background: linear-gradient(90deg, #6366f1 0%, #60a5fa 100%);
  color: #fff;
  border: none;
  box-shadow: 0 2px 8px 0 rgba(99,102,241,0.10);
  transition: background 0.2s, box-shadow 0.2s, transform 0.15s;
  font-size: 1.08rem;
  padding: 0 22px;
  height: 40px;
  display: flex;
  align-items: center;
}
.modern-add-btn:hover {
  background: linear-gradient(90deg, #60a5fa 0%, #6366f1 100%);
  box-shadow: 0 4px 16px 0 rgba(99,102,241,0.18);
  transform: scale(1.04);
}

.modern-row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* 分页器现代化样式 */
.pagination-container {
  width:98%;
  display: flex;
  justify-content: flex-end;
  margin-top: 32px;
}

.modern-pagination :deep(.el-pagination) {
  background: transparent;
  border-radius: 16px;
  box-shadow: 0 2px 8px 0 rgba(99,102,241,0.04);
  padding: 8px 24px;
}

.modern-pagination :deep(.el-pagination__total),
.modern-pagination :deep(.el-pagination__sizes),
.modern-pagination :deep(.el-pagination__jump) {
  font-size: 1.05rem;
  color: #6366f1;
}

.modern-pagination :deep(.el-pagination__editor.el-input .el-input__inner) {
  border-radius: 8px;
  background: #f1f5f9;
  color: #6366f1;
}

.modern-pagination :deep(.el-pager li.is-active) {
  background: linear-gradient(90deg, #6366f1 0%, #60a5fa 100%);
  color: #fff;
  border-radius: 8px;
}

@media (max-width: 900px) {
  .glassy-card {
    flex-direction: column;
    align-items: stretch;
    padding: 18px 10px;
    gap: 16px;
  }
  .search-container {
    margin-right: 0;
    margin-bottom: 12px;
  }
  .header .extra {
    justify-content: flex-end;
  }
  #homePage {
    padding: 12px 0 12px 0;
  }
  .pagination-container {
    margin-top: 18px;
  }
}
</style>